<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small"
        style="width:800px;border:1px solid #eee;padding:20px;">
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <p class="chartTitle">支付方式配置</p>
        <el-form-item label="选择支付模式">
          <el-radio-group v-model="formInline.type" @change="typeChange">
            <el-radio :label="0">原生支付宝</el-radio>
            <el-radio :label="1">付呗支付</el-radio>
            <el-radio :label="2">快盈支付</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="付呗门店ID" required v-if="formInline.type==1">
          <el-input size="small" onkeypress="return event.which>=48&&event.which<=57" type="number" onmousewheel="return false;" min="0"
            v-model="formInline.fubei_store_id" placeholder="输入付呗门店ID" style="width:300px"></el-input>
          <a href="https://e.51fubei.com" target="view_window" style="margin-left:20px;">
            <el-button type="text"> 点击查找付呗门店ID</el-button>
          </a>
        </el-form-item>

        <div v-else-if="formInline.type==2">
          <el-form-item>
            <p style="color:red">小程序OpenID的跟收银台的OpenID要在同一个商户的AppID和AppSecret下</p>
          </el-form-item>
          <el-form-item label="商户AppId" required>
            <el-input size="small" onkeypress="return event.which>=48&&event.which<=57" onmousewheel="return false;" min="0" v-model="formInline.ky_appid"
              placeholder="输入商户AppId" style="width:300px;margin-left:92px;"></el-input>
          </el-form-item>
          <el-form-item label="商户AppSecret" required>
            <el-input size="small" onkeypress="return event.which>=48&&event.which<=57" onmousewheel="return false;" min="0" v-model="formInline.ky_secret"
              placeholder="输入商户AppSecret" style="width:300px;margin-left:63px;"></el-input>
          </el-form-item>
          <el-form-item label="店长OpenID" required>
            <el-input size="small" onkeypress="return event.which>=48&&event.which<=57" type="number" onmousewheel="return false;" min="0"
              v-model="formInline.ky_open_id" placeholder="输入店长OpenID" style="width:300px;margin-left:80px;"></el-input>
            <a href="https://merchant.kybcrm.com/" target="view_window" style="margin-left:20px;">
              <el-button type="text"> 点击查找门店店长ID</el-button>
            </a>
          </el-form-item>
          <el-form-item label="店长OpenID（小程序）" required>
            <el-input size="small" onkeypress="return event.which>=48&&event.which<=57" type="number" onmousewheel="return false;" min="0"
              v-model="formInline.ky_open_wx_id" placeholder="输入店长OpenID（小程序）" style="width:300px;margin-left:10px;"></el-input>
            <a href="https://merchant.kybcrm.com/" target="view_window" style="margin-left:20px;">
              <el-button type="text"> 点击查找门店店长ID</el-button>
            </a>
          </el-form-item>
        </div>

        <div v-else style="width:100px;height:33px"></div>
        <br>
        <el-form-item style="position:relative;top:0px;left:75%">
          <el-button :disabled="(formInline.type==1&&!formInline.fubei_store_id)||(formInline.type==2&&!formInline.ky_open_id)" type="primary"
            @click="saveClick">保 存</el-button>
        </el-form-item>
      </el-form>
      <hr class="DJhr" />
      <el-form :inline="true" size="small" style="border:1px solid #eee;padding:20px;">
        <p class="chartTitle">快盈核销配置</p>
        <div style="display:flex;align-items: center;">
          <div class="verify-input">
            核销账号：
            <el-input size="small" style="width:300px" placeholder="单行输入" :maxlength="50" :disabled="isSave==0" v-model="verifyID">
            </el-input>
          </div>
          <div class="verify-input">
            核销密码：
            <el-input size="small" style="width:300px" placeholder="单行输入" :maxlength="50" :disabled="isSave==0" v-model="verifyPWD">
            </el-input>
          </div>
          <div class="verify-input">
            企业码：
            <el-input size="small" style="width:300px" placeholder="单行输入" :maxlength="50" :disabled="isSave==0" v-model="companyID">
            </el-input>
          </div>
        </div>
        <br>
        <el-form-item style="marginLeft:1050px">
          <el-button v-if="isSave==1" type="primary" :disabled="isDel==0" @click="saveVerify(1)">保 存</el-button>
          <el-button v-else type="primary" @click="saveVerify(0)">修 改</el-button>
          <el-button type="primary" :disabled="isDel==0" @click="saveVerify(2)">清 空</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getList, getStoreList, getBrandList, save, kySave } from '@/api/member/pay_manager';
export default {
  data() {
    return {
      list: [],
      listLoading: false,
      storeList: [],
      brandList: [],
      completeDialog: false,
      isSave: 1,
      isDel: 0,
      verifyID: '',
      verifyPWD: '',
      companyID: '',
      oldVerifyID: '',
      oldVerifyPWD: '',
      oldCompanyID: '',
      formInline: {
        store_id: '',
        type: 0,
        fubei_store_id: '',
        ky_open_id: '',
        ky_appid: '',
        ky_secret: '',
        ky_open_wx_id: ''
      }
    };
  },
  created() {
    this.getStore();
  },
  methods: {
    typeChange() {},
    saveClick() {
      if (!this.formInline.ky_appid) {
        this.$message({ type: 'error', message: '商户AppId不能为空' });
        return;
      }
      if (!this.formInline.ky_secret) {
        this.$message({ type: 'error', message: '商户AppSecret不能为空' });
        return;
      }
      if (!this.formInline.ky_open_wx_id) {
        this.$message({ type: 'error', message: '店长OpenID（小程序）不能为空' });
        return;
      }
      if (this.formInline.type == 1 && this.formInline.fubei_store_id.length > 9) {
        this.$message({ type: 'error', message: '付呗门店ID长度不能超过9位' });
        return;
      }
      if (this.formInline.type == 2 && this.formInline.ky_open_id.length > 32) {
        this.$message({ type: 'error', message: '店长OpenID不能超过32位' });
        return;
      }
      if (this.formInline.type == 2 && this.formInline.ky_appid.length > 32) {
        this.$message({ type: 'error', message: '商户AppId长度不能超过32位' });
        return;
      }
      if (this.formInline.type == 2 && this.formInline.ky_secret.length > 32) {
        this.$message({ type: 'error', message: '商户AppSecret不能超过32位' });
        return;
      }
      if (this.formInline.type == 2 && this.formInline.ky_open_wx_id.length > 32) {
        this.$message({ type: 'error', message: '店长OpenID（小程序）不能超过32位' });
        return;
      }
      let data = {
        store_id: this.formInline.store_id,
        proportion: this.formInline.type,
        ky_open_id: this.formInline.ky_open_id,
        fubei_store_id: this.formInline.fubei_store_id,
        ky_appid: this.formInline.ky_appid,
        ky_secret: this.formInline.ky_secret,
        ky_open_wx_id: this.formInline.ky_open_wx_id
      };
      save(data).then(response => {
        this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
        this.fetchData();
      });
    },
    saveVerify(i) {
      if (i >= 1) {
        let is_ky_check = 0;
        if (i == 1) {
          if (!this.verifyID) {
            this.$message.error('请输入核销账号');
            return;
          }
          if (!this.verifyPWD) {
            this.$message.error('请输入核销密码');
            return;
          }
          if (!this.companyID) {
            this.$message.error('请输入企业码');
            return;
          }
          this.isSave = 0;
          is_ky_check = 1;
        } else {
          this.verifyID = '';
          this.verifyPWD = '';
          this.companyID = '';
          this.isSave = 1;
        }
        if (this.verifyID == this.oldVerifyID && this.verifyPWD == this.oldVerifyPWD && this.companyID == this.oldCompanyID) {
          if (this.verifyID == '') {
            this.isSave = 1;
          } else {
            this.isSave = 0;
          }
          return;
        }
        kySave({
          is_ky_check,
          ky_login_name: this.verifyID,
          ky_password: this.verifyPWD,
          ky_merchant_code: this.companyID,
          store_id: this.formInline.store_id
        }).then(res => {
          this.$message({ type: res.code == 1 ? 'success' : 'error', message: res.message });
          if (res.code == 1) {
            this.oldVerifyID = this.verifyID;
            this.oldVerifyPWD = this.verifyPWD;
            this.oldCompanyID = this.companyID;
          }
        });
      } else {
        this.isSave = 1;
      }
    },
    getStore() {
      getStoreList({ category_id: 306 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          this.formInline.store_id = response[0].id;
        }
        this.fetchData();
      });
    },
    storeChange() {
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.isSave = 1;
      getList(this.formInline)
        .then(response => {
          this.formInline.type = response.payment_id * 1;
          this.formInline.ky_open_id = response.ky_open_id == null ? '' : response.ky_open_id;
          this.formInline.ky_appid = response.ky_appid == null ? '' : response.ky_appid;
          this.formInline.ky_secret = response.ky_secret == null ? '' : response.ky_secret;
          this.formInline.ky_open_wx_id = response.ky_open_wx_id == null ? '' : response.ky_open_wx_id;
          this.formInline.fubei_store_id = response.fubei_store_id == null ? '' : response.fubei_store_id;
          this.companyID = response.ky_merchant_code == null ? '' : response.ky_merchant_code;
          this.verifyID = response.ky_login_name == null ? '' : response.ky_login_name;
          this.verifyPWD = response.ky_password == null ? '' : response.ky_password;
          if (this.verifyID != '') {
            this.isDel = 1;
            this.isSave = 0;
          } else {
            this.isDel = 0;
          }
          this.oldVerifyID = this.verifyID;
          this.oldVerifyPWD = this.verifyPWD;
          this.oldCompanyID = this.companyID;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    },
    clearData() {
      if (!this.checked) {
        (this.verifyID = ''), (this.verifyPWD = ''), (this.companyID = '');
      }
    }
  },
  computed: {
    allLength: function() {
      return this.verifyID.length + this.verifyPWD.length + this.companyID.length;
    }
  },
  watch: {
    allLength: function(val) {
      if (val == 0) {
        this.isDel = 0;
      } else {
        this.isDel = 1;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
div.verify-input {
  display: flex;
  white-space: nowrap;
  align-items: center;
  margin-right: 30px;
}
</style>
